<form class="layui-form" id="search-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">年份</label>
            <div class="layui-input-inline">
                <input type="text" name="year" placeholder="请输入年份" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">月份</label>
            <div class="layui-input-inline">
                <input type="text" name="month" placeholder="请输入月份" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">厂商</label>
            <div class="layui-input-inline">
                <input type="text" name="manufacturer" placeholder="请输入厂商" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <button class="layui-btn" lay-submit lay-filter="search">搜索</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<table class="layui-table" id="car-sales-table" lay-filter="car-sales"></table>

<script>
layui.use(['table', 'form'], function(){
    var table = layui.table;
    var form = layui.form;

    // 初始化表格
    table.render({
        elem: '#car-sales-table',
        url: '/api/car_sales',
        page: true,
        cols: [[
            {field: 'year', title: '年份', sort: true},
            {field: 'month', title: '月份', sort: true},
            {field: 'ranking', title: '排名'},
            {field: 'model', title: '车型'},
            {field: 'manufacturer', title: '厂商'},
            {field: 'sales_volume', title: '销量', sort: true},
            {field: 'price_range', title: '售价区间'}
        ]],
        done: function(res, curr, count){
            console.log("📊 接口返回数据：", res);
            if (res.length === 0) {
                layer.msg("⚠️ 没有找到符合条件的数据");
            }
        }
    });

    // 搜索按钮点击事件
    form.on('submit(search)', function(data){
        console.log("📥 提交的查询条件:", data.field);  // 调试用
        table.reload('car-sales-table', {
            where: data.field,
            page: { curr: 1 }  // 回到第一页
        });
        return false;  // 阻止默认提交
    });
});
</script>
